<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>值绑定</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <h3>值绑定</h3>
        <p>使用 v-bind 指令 为 HTML元素 指定的 attribute 绑定值，比如 v-bind:value="g.value"</p>

        <hr>

        <div id="value-bind">
            
            <div>
                性别:
                <span v-for="g in genderList">
                    <input type="radio" v-model="gender" v-bind:value="g.value" v-bind:id="g.id">
                    <label v-bind:for="g.id">{{ g.text }}</label>
                </span>
            </div>
            <p>根据用户在页面上选择不同的 单选按钮 来确定 gender 值</p>
            <p>性别: {{ gender }}</p>

            <hr>

            <div>
                <span>
                    <!-- 
                    <input type="checkbox" v-model="exemption" true-value="真的" false-value="假的" id="exemption"> 
                    -->
                    <input type="checkbox" 
                           v-model="exemption" 
                           :true-value="exemptionList[0]" 
                           :false-value="exemptionList[1]" 
                           id="exemption">
                    <label for="exemption">十天内免登录</label>
                </span>
            </div>
            <p>根据用户在页面上的选择 来确定 exemption 值</p>
            <p>免登录: {{ exemption }}</p>

            <hr>
            <div>
                爱好:
                <span v-for="h in hobbyList">
                    <input type="checkbox" v-model="hobby" :value="h.value" :id="h.id">
                    <label :for="h.id">{{ h.text }}</label>
                </span>
            </div>
            <p>根据用户在页面上选择不同的 复选框 来确定 hobby 值 </p>
            <p>性别: {{ hobby }}</p>

            <hr>

            <div>
                <label for="">省份</label>
                <select v-model="province">
                    <option v-for="p in provinceList" :value="p.value">{{ p.text }}</option>
                </select>
            </div>
            <p>根据用户在页面上选择不同的 选项 来确定 province 值 </p>
            <p>省份: {{ province }}</p>

        </div>

        <script>
            const app = Vue.createApp({
                data(){
                    return {
                        gender: 'male',
                        genderList: [
                            { id: 'gender-male' , value: 'male' , text: '靓仔' } ,
                            { id: 'gender-female' , value: 'female' , text: '靓妹' } ,
                            { id: 'gender-secret' , value: 'secret' , text: '保密' }
                        ],
                        exemption: '不是' ,
                        exemptionList: [ '是的' , '不是' ],
                        hobby:[] ,
                        hobbyList: [
                            { id: 'hobby-eat' , value: 'eat' , text: '吃' },
                            { id: 'hobby-sleep' , value: 'sleep' , text: '睡' },
                            { id: 'hobby-video' , value: 'video' , text: '刷视频' },
                            { id: 'hobby-eatji' , value: 'eatji' , text: '吃鸡' }
                        ],
                        province: 'shaanxi' ,
                        provinceList: [
                            { value: 'gansu' , text: '甘肃省' },
                            { value: 'shaanxi' , text: '陕西省' },
                            { value: 'sichuan' , text: '四川省' },
                            { value: 'chongqing' , text: '重庆市' }
                        ]
                    }
                }
            });

            const vm = app.mount( '#value-bind' );
            console.log( vm );
        </script>
        
    </body>
</html>